<style scoped lang="scss">
.pay {
  width: 10rem;
  height: 92.2vh;
  background-color: $white-color;
  padding-top: 1.3333rem;

  .pay-header {
    width: 10rem;
    height: 2rem;
    // background-color: pink;
    @include flex-space-around-center;
    flex-direction: column;

    h6 {
      font-size: 0.4rem;
      font-weight: 400;
      color: #ccc;
    }

    p {
      font-size: 0.7rem;
      font-weight: 500;
      color: #000;
    }
  }

  .pay-content {
    width: 9.2rem;
    height: 3rem;
    margin-left: 0.35rem;

    .pay-content-top {
      width: 9.2rem;
      height: 1rem;

      h6 {
        font-size: 0.4rem;
        font-weight: 400;
        color: #000;
      }
    }

    .pay-content-item {
      width: 9.2rem;
      height: 1rem;
      display: flex;
      align-items: center;

      .pay-content-item-left {
        width: 0.5rem;
        height: 1rem;
        @include flex-center;
        margin-right: 0.15rem;

        img {
          width: 0.5rem;
          height: 0.5rem;
        }
      }

      .pay-content-item-center {
        width: 7.5rem;
        height: 1rem;
        display: flex;
        align-items: center;

        h6 {
          font-size: 0.4rem;
          font-weight: 400;
          color: #000;
        }
      }

      .pay-content-item-right {
        width: 1rem;
        height: 1rem;
        @include flex-center;

        input {
          width: 0.5rem;
          height: 0.5rem;
        }
      }
    }
  }

  .pay-content-bottom {
    width: 10rem;
    height: 1.1rem;
    @include flex-center;
    position: fixed;
    bottom: 1.3rem;
    left: 0;

    button {
      width: 8rem;
      height: 1.1rem;
      color: $white-color;
      background-color: #0bbaef;
      border-radius: 1rem;
      border: 0;
    }
  }
}
</style>
<template>
  <div class="pay">
    <div class="box">

      <div class="pay-header">
        <h6>
          订单号：{{ $route.query.outTradeNo }}
        </h6>
        <p>
          <span>¥{{ $route.query.totalPrice }}</span>
        </p>
      </div>
      <div class="pay-content">
        <div class="pay-content">
          <div class="pay-content-top">
            <h6>
              请选择支付方式
            </h6>
          </div>
          <div class="pay-content-item">
            <div class="pay-content-item-left">
              <img src="http://43.138.15.137:8086/static/img/alipay.86fc885c.png" alt="">
            </div>
            <div class="pay-content-item-center">
              <h6>
                支付宝支付
              </h6>
            </div>
            <div class="pay-content-item-right">
              <!-- input -->
              <input type="radio" name="paymentMethod" id="alipay" :checked="selectedMethod === 'alipay'"
                @change="selectedMethod = 'alipay'">
            </div>
          </div>
          <div class="pay-content-item">
            <div class="pay-content-item-left">
              <img src="	http://43.138.15.137:8086/static/img/wxpay.73bddc7a.png" alt="">
            </div>
            <div class="pay-content-item-center">
              <h6>
                微信支付
              </h6>
            </div>
            <div class="pay-content-item-right">
              <!-- input -->
              <input type="radio" name="paymentMethod" id="wechat" :checked="selectedMethod === 'wechat'"
                @change="selectedMethod = 'wechat'">
            </div>
          </div>
        </div>
      </div>
      <div class="pay-content-bottom">
        <button @click="handlePay">
          确认支付
        </button>
      </div>
    </div>
    <div>
      
    </div>
  </div>
</template>
<script>
import { alipayAPI } from '@/api/ress/pay'
export default {
  data() {
    return {
      selectedMethod: '',
      paymentMethods: [
        { label: '微信支付', value: 'wechat', icon: 'wechat-icon' },
        { label: '支付宝', value: 'alipay', icon: 'alipay-icon' }
      ],
      orderInfo: {
        totalAmount: this.$route.query.totalPrice,
        outTradeNo: this.$route.query.outTradeNo,
        type: 1
      }
    }
  },
  methods: {
    async handlePay() {
      if (this.selectedMethod === '') {
        this.$toast.show('请选择支付方式', 'error', 'top')
        return
      }
      try {
        let res = await alipayAPI(this.orderInfo)
        console.log(res);
        if (res.code === 200) {

        }
      } catch (error) {
        this.$toast.show('支付失败', 'error', 'top')
      }
    }
  }
}
</script>